<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!-- 设置语言支持 -->
<%@ page contentType="text/html; charset=utf-8"%>  
<!-- 引用装饰标签 -->
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>  
<!-- 引用struts标签 -->
<%@ taglib prefix="s" uri="/struts-tags" %>
<!-- 引用oscache标签 -->
<%@ taglib uri="http://www.opensymphony.com/oscache" prefix="cache" %>
<head>
<!-- 设置根目录 -->
<base href="<%=basePath%>">
    <title><decorator:title default="华兴银行" />
</title>
<link rel="shortcut icon" href="images/logo.ico">
<decorator:head />
 	
	<!-- 自定义css，进行界面微调 -->
	<style type="text/css">
	/* neutralize pane formatting BEFORE loading UI Theme */
	.ui-layout-pane ,
	.ui-layout-content {
		background:	none;
		border:		0;
		padding:	0;
		overflow:	visible;
	}
	#logo{
	position:absolute;
	top:10px;
	left:10px;
	}
	#title{
		position:absolute;
		top:20px;
		left:430px;
	}
	#logout{
		position:absolute;
		top:3px;
		right:3px;
	}
	#radio{
		position:absolute;
		top:91px;
		left:10px;
	}
	</style>
	<!-- 启动时载入的css，对layout进行设置 -->
	<style type="text/css">
	p				{ margin:		1em 0; }

	/* use !important to override UI theme styles */
	.grey			{ background:	#999 !important; }
	.outline		{ /*border:		1px dashed #F00 !important;*/ }
	.add-padding	{ padding:		1px !important; }
	.no-padding		{ padding:		0 !important; }
	.add-scrollbar	{ overflow:		auto; }
	.no-scrollbar	{ overflow:		hidden; }
	.allow-overflow	{ overflow:		visible; }
	.full-height	{ height:		100%; }
	button			{ cursor:		pointer; }

	</style>
<!-- 	布局css -->
	<link rel="stylesheet" type="text/css" href="css/layout-default-latest.css" />
	<!-- 默认css -->
	<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.18.custom.css" />
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script> 
	<script type="text/javascript" src="js/jquery.layout-latest.js"></script>

	<!-- load the Tabs & Accordions callbacks so we can use them below-->
	<script type="text/javascript" src="js/jquery.layout.resizeTabLayout.min-1.1.js"></script>
	<script type="text/javascript" src="js/jquery.layout.resizePaneAccordions.min-1.0.js"></script>
	<!-- 切换主题js -->
    <script type="text/javascript" src="js/themeswitchertool.js"></script> 
    <!-- debug.js -->
	<script type="text/javascript" src="js/debug.js"></script>
	<!-- 对layou进行初始化 -->
	<script type="text/javascript"> 

	$(document).ready(function () {
		
		
		$( "#radio" ).buttonset();
		$( "#logo,#title,#radio" ).draggable();
		// OUTER/PAGE LAYOUT
		pageLayout = $("body").layout({ // DO NOT use "var pageLayout" here
			west__size:			.13   //左边
		,	east__initClosed:	true  //右边
		,	east__size:			.30 
		,	north__size:		.23   //上边
		,	south__size:		.10
		,	south__initClosed:	true //下面
		//,	north__initClosed:	true
		,	west__onresize:		$.layout.callbacks.resizePaneAccordions // west accordion a child of pane
		,	east__onresize:		$.layout.callbacks.resizePaneAccordions // east accordion nested inside a tab-panel
		}); 

		// TABS IN CENTER-PANE
		// create tabs before wrapper-layout so elems are correct size before creating layout
		pageLayout.panes.center.tabs({
			show:				$.layout.callbacks.resizeTabLayout // tab2-accordion is wrapped in a layout
		});

		// WRAPPER-LAYOUT FOR TABS/TAB-PANELS, INSIDE OUTER-CENTER PANE
 		pageLayout.panes.center.layout({
			closable:			false
		,	resizable:			false
		,	spacing_open:		0
		,	center__onresize:	$.layout.callbacks.resizeTabLayout // tabs/panels are wrapped with an inner-layout
		});
/*
		// LAYOUT TO CONTAIN HEADER+ACCORDION, INSIDE A TAB, INSIDE OUTER-CENTER PANE
		$("#tab-panel-center-2").layout({
			center__onresize:	$.layout.callbacks.resizePaneAccordions // accordion is inside center-pane
		,	resizeWithWindow:	false	// resizing is handled by callbacks to ensure the correct resizing sequence
		,	triggerEventsOnLoad: false	// force resize of accordion when layout inits - ie, becomes visible 1st time
		}); */

		// TABS INSIDE EAST-PANE
		pageLayout.panes.east.tabs({
			show:				$.layout.callbacks.resizePaneAccordions // resize tab2-accordion when tab is activated
		});
		pageLayout.sizeContent("east"); // resize pane-content-elements after creating east-tabs

		// INIT ALL ACCORDIONS - EVEN THOSE NOT VISIBLE
		$("#accordion-west")	.accordion({ fillSpace: true });
		//$('#accordion-west').accordion('option', 'active', 1);
		//$('#accordion-west').accordion('option', 'event', 'mouseover');
		$("#accordion-center")	.accordion({ fillSpace: true });
		$("#accordion-east")	.accordion({ fillSpace: true });


		// THEME SWITCHER
		addThemeSwitcher('#east-toolbar',{ top: '5px', right: '12px' });
		// if a new theme is applied, it could change the height of some content,
		// so call resizeAll to 'correct' any header/footer heights affected
		// NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
		setTimeout( pageLayout.resizeAll, 2000 ); /* allow time for browser to re-render with new theme */
	});

	</script> 
</head>
<body>  
       <jsp:include page="/head.jsp"></jsp:include>  
       <span><decorator:usePage id="thePage" /> </span><!-- 把当前页面赋值给thePage这个变量，动态加载left.jsp-->  
       <% String selection = thePage.getProperty("meta.moduleName"); 
       	   selection =  "/" + selection + "/left.jsp";	
       %> 
       <jsp:include page="<%=selection%>"></jsp:include>
       <jsp:include page="/right.jsp"></jsp:include>
       
     <div id="tabs-center" class="ui-layout-center no-scrollbar add-padding grey">
       <decorator:body /> 
       	<!-- <div class="ui-layout-south ui-state-disabled ui-widget-content ui-corner-bottom no-scrollbar add-padding">
		TABS FOOTER
		</div> -->
	<!-- /center Tabs layout -->
	</div> 
       <jsp:include page="/foot.jsp"></jsp:include>  
     </body> 

</html>